<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鲁班商城首页</title>
		<style type="text/css">
			.swiper-container {
		        width:100%;
		        height:549px;
		      margin: 0 auto;
		    }
		    .swiper-slide {
		        text-align: center;
		        font-size: 18px;
		        background: #fff;
		
		        /* Center slide text vertically */
		        display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: flex;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;
		    }
		    a:hover{opacity: 0.7; }
	    
		</style>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/square.css"/>
		<link rel="stylesheet" type="text/css" href="css/daohang.css"/>
		<script type="text/javascript" src="js/index.js" ></script>
	</head>
	<body>
		<!-- 背景div -->
	<div id="mydiv" style="height:0px;"></div>
	<script type="text/javascript">
		window.onload = function() {
		    //配置
		    var config = {
		        vx: 4,	//小球x轴速度,正为右，负为左
		        vy: 4,	//小球y轴速度
		        height: 5,	//小球高宽，其实为正方形，所以不宜太大
		        width: 5,
		        count: 200,		//点个数
		        color: "111,193,291", 	//点颜色
		        stroke: "255,0,0", 		//线条颜色
		        dist: 6000, 	//点吸附距离
		        e_dist: 20000, 	//鼠标吸附加速距离
		        max_conn: 10 	//点到点最大连接数
		    }

		    //调用
		    CanvasParticle(config);
		}
	</script>
	<script type="text/javascript" src="js/canvas-particle.js"></script>
		
		<!--右边导航部分-->
		<div class="nav-left">
			<div class="divcss5" style="margin-top: 122px; background:url(img/index/user.png);background-repeat: no-repeat;">
			    <a href="#" class="now">&nbsp;</a>
			     <span>你需要<a href="login.html"style="display: inline; color: #00FFFF;">登录</a></span>
			</div> 
			<div class="divcss5" style="background:url(img/index/copy.png);background-repeat: no-repeat;">
			    <span>我收藏的品牌</span>
			    <a href="#" class="now">&nbsp;</a>
			</div> 
			<div class="divcss5" style="background:url(img/index/star.png);background-repeat: no-repeat;">
			    <span>加载记录中...</span>
			    <a href="#" class="now">&nbsp;</a>
			</div> 
			<div class="divcss5" style="background:url(img/index/History.png);background-repeat: no-repeat;">
			    <a href="#" class="now">&nbsp;</a>
			    <span>您还没看过我我</span>
			</div> 
			<div class="divcss5" style="background:url(img/index/car.png);background-repeat: no-repeat;height: 100px;">
			    <a href="#" class="now">&nbsp;</a>
			     <span>前往<a href="" style="display: inline; color: #00FFFF;">购物车</a>详情</span>
			</div> 
			<div class="divcss5" style="background:url(img/index/edit.png);background-repeat: no-repeat; margin-top: 100px;">
			    <a href="#" class="now">&nbsp;</a>
			    <span>反馈到<a href="" style="display: inline; color: #00FFFF;">邮箱</a></span>
			</div> 
			<div class="divcss5" style="background:url(img/index/TOP.png);background-repeat: no-repeat;">
			    <a href="" target="_top" class="now">&nbsp;</a>
			</div> 
		 </div>
		<div class="wrapper">
			  <div class="cube">
			   
			    <b class="left"></b>
			    <b class="right"></b>
			    <i class="front"></i>
			    <i class="back"></i>
			   
			  </div>
			</div>	
		<!--头部-->
		<div id="web">
			<div class="header">
				<div class="top">
					<div class="top-t clearfix">
						<span>
							<a  href="register.html" onclick="register()">注册</a>
							<a  href="no-calculate.html" onclick="login()">登录</a>
							<a  href="login.html" onclick="viplogin()">vip登录</a>
						</span>
						<ul>
							<li><a href="search.html" style="border-right:solid 1px #a8a9ae ;">商家入驻</a></li>
							<li><a href="Lb-car.html" style="border-right:solid 1px #a8a9ae ;">我的订单</a></li>
							<li><a href="address.html"><img src="img/buy-car.png"/>&nbsp;<b>(0)</b></a></li>
						</ul>
					</div>
				</div>
					
				<div class="header_contant clearfix">
					<div class="logo">
						<a href="index.html">
							<!--<img src="img/LOGO.png" />-->
						</a>
					</div>
					<div class="search">
						<form action="" method="">
							<input type="text" placeholder="search"/>
							<input type="image" src="img/search.png" />
						</form>
						<ul class="clearfix">
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
						</ul>
					</div>
				</div>
			</div>
			<nav>
				<div class="nav" style="position:relative;">
					<ul class="clearfix">
						<li><a href="">木工</a>
							<div class="navigation">
								<div class="centent">
									<div class="listing1 fl">
										<ul class="fl">
											<li style="font-size: 16px; font-weight: bold;">板材</li>
											<li>装饰面板</li>
											<li>宝丽版</li>
											<li>三聚氰胺版</li>
											<li>铝朔版</li>
											<li>多层版</li>
											<li>中纤版</li>
											<li>细木工板</li>
											<li>刨花版</li>
										</ul>
										<ul class="fl" style="margin-left: 30px; margin-top: 20px;" >
											<li>欧松板</li>
											<li>防火板</li>
											<li>密度板</li>
											<li>其他板材</li>
										</ul>
									</div>
									<div class="listing2 fl">
										<ul>
											<li style="font-size: 16px; font-weight: bold;">地板</li>
											<li>实木地板</li>
											<li>实木复合地板</li>
											<li>强化复合地板</li>
											<li>竹地板</li>
											<li>软木地板</li>
											<li>塑料地板</li>
											<li>PVC地板</li>
											<li>其他地板</li>
										</ul>
									</div>
									<div class="listing3 fl">
										<ul class="fl">
											<li style="font-size: 16px; font-weight: bold;">木线</li>
											<li>普通龙骨</li>
											<li>精品龙骨</li>
											<li>顶线</li>
											<li>门线</li>
											<li>角线</li>
											<li>木方线</li>
											<li>收口线</li>
											<li>花木线</li>
										</ul>
										<ul style="padding-top: 20px; margin-left: 30px; display: inline-block;">
											<li>踢脚线</li>
											<li>定制木线</li>
											<li>其它木线</li>
										</ul>
									</div>
									<div class="listing4 fl">
										<ul class="fl">
											<li style="font-size: 16px; font-weight: bold;">地板配件</li>
											<li>地板钉</li>
											<li>扣条</li>
											<li>地垫</li>
											<li>地板蜡</li>
											<li>地板清洁剂</li>
											<li>底板防水油</li>
											<li>地板修补剂</li>
											<li>甲醇清除剂</li>
										</ul>
										<ul style="padding-top: 20px; display: inline-block;">
											<li>地板安装工具</li>
											<li>其他地板配件 </li>
										</ul>
									</div>
									<div class="listing5 fl">
										<ul>
											<li style="font-size: 16px; font-weight: bold;">吊顶钢龙骨</li>
											<li>吊筋</li>
											<li>吊钢</li>
											<li>轻钢龙骨</li>
											<li>扣板龙骨</li>
											<li>铝合金龙骨</li>
											<li>其它吊件</li>
										</ul>
									</div>
									<div class="listing6 fl">
										<ul class="fl">
											<li style="font-size: 16px; font-weight: bold;">木工类五金</li>
											<li>拉手</li>
											<li>锁</li>
											<li>合页</li>
											<li>铰链</li>
											<li>插销</li>
											<li>门夹</li>
											<li>碰珠</li>
											<li>脚轮</li>
										</ul>
										<ul class="fl" style="padding-top: 20px; margin-left: -25px; display: inline-block;">
											<li>闭门器</li>
											<li>地弹簧</li>
											<li>吊轮</li>
											<li>导轨</li>
											<li>螺栓</li>
											<li>钉</li>
											<li>角码</li>
											<li>螺母</li>
										</ul>
										<ul style="padding-top: 20px; margin-left: 25px; display: inline-block;">
											<li>围网</li>
											<li>其他木工五金</li>
										</ul>
									</div>
								</div>
							</div>	
							
						</li>
						<li><a href="">泥水工</a></li>
						<li><a href="">油漆工</a></li>
						<li><a href="">水电工</a></li>
						<li><a href="">门窗/其他</a></li>
						<li><a href="">装修工具</a></li>
						<li><a href="">消费工具</a></li>
						<li><a href="">建筑防护</a></li>
						<li><a href="">精细化学品</a></li>
						<li><a href="">定制/非标准</a></li>
					</ul>
				</div>
		</nav>		
			<div class="bg" style="background: #f1f1f1;padding-bottom: 53px;">
			 <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide"><a href=""><img src="img/index/banner.png" width="100%" height="594px%"/></a></div>
		            <div class="swiper-slide"><a href=""><img src="img/index/banner.png" width="100%" height="594px"/></a></div>
		            <div class="swiper-slide"><a href=""><img src="img/index/banner.png" width="100%" height="594px"/></a></div>
		            <div class="swiper-slide"><a href=""><img src="img/index/banner.png" width="100%" height="594px"/></a></div>
		        </div>
		        <!-- Add Pagination -->
		        <div class="swiper-pagination"></div>
		        <!-- Add Arrows -->
		        <div class="swiper-button-next"></div>
		        <div class="swiper-button-prev"></div>
		    </div>
		
		    <!-- Swiper JS -->
		    <script src="js/swiper.min.js"></script>
		
		    <!-- Initialize Swiper -->
		    <script>
		    var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        slidesPerView: 1,
		        paginationClickable: true,
		        spaceBetween: 30,
		        loop: true,
		        effect:'flips',
//		      	effect : 'cube',
		      	 autoplay:3000

		    });
		    </script>
			<div class="advisement clearfix">
				<div class="main">
					<div class="view">
					      <img src="img/index/advisement3.png" alt="懒人之家">
					      <div class="hover">
					         <h3>主标题</h3>
					          <p style="line-height: 30px;">副标题<br />
					          <a href="" style="color: #FFFFFF;">立即抢购>></a>
					          </p>
					       </div>
					</div>
					<div class="view2">
					 	  <img src="img/index/advisement2.png" alt="懒人之家">
					      <div class="hover2">
					          <h3>您的私人装修管家</h3>
					          <p style="line-height: 30px;">够省才够high<br />
					          <a href="" style="color: #FFFFFF;">立即抢购>></a>
					          </p>
					       </div>
					</div>
					<div class="view">
					      <img src="img/index/advisement1.png" alt="懒人之家">
					      <div class="hover">
					          <h3>品牌特卖</h3>
					          <p style="line-height: 30px;">自然之宝全新升级<br />
					          <a href="" style="color: #FFFFFF;">立即抢购>></a>
					          </p>
					          
					      </div> 
					</div>
				</div>
			</div>
			<div class="brand-logo">
				<ul class="clearfix">
					<li>
						<div class="brand-logo-pic">
							
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic">
							<a href=""></a>
						</div>
						<span>高仪</span>
					</li>
					<li>
						<div class="brand-logo-pic1" style="width: 44px; height: 49px;">
							<a href=""></a>
						</div>
						<span>换一批</span>
					</li>
				</ul>
			</div>
			<div class="index-contant">
				<table>
					<tr>
						<td rowspan="2">
							<div class="index-contant-first">
								<div class="len">
									<a href=""><img src="img/index/pic1.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
							
							
						</td>
						<td>
							<div class="index-contant-second">
								<div class="normal">
									<a href=""><img src="img/index/pic2.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
						<td colspan="2">
							<div class="index-contant-third">
								<div class="wid">
									<a href=""><img src="img/index/pic4.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="index-contant-second">
								<div class="normal">
									<a href=""><img src="img/index/pic3.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
						<td rowspan="2" >
							<div class="index-contant-first">
								<div class="len">
									<a href=""><img src="img/index/pic8.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
						<td>
							<div class="index-contant-second">
								<div class="normal">
									<a href=""><img src="img/index/pic6.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<div class="index-contant-third">
								<div class="wid">
									<a href=""><img src="img/index/pic5.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>	
							</div>
						</td>
						<td>
							<div class="index-contant-second">
								<div class="normal">
									<a href=""><img src="img/index/pic7.png"/></a>
								</div>
								<h4>主标题主标题</h4>
								<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题 </p>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="middle-banner">
				<a href=""><img src="img/index/middle-banner.png" /></a>
			</div>
				
			<div class="stear-one clearfix">
				<ul>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
				</ul>
				<span><a>商品楼层一</a>Commodity floor one</span>
			</div>
			
			<div class="floor-one-contant">
				<table>
					<tr>
						<td rowspan="2" class="own">
							<div class="floor1">
								<a href=""><img src="img/index/floor1-00.png" /></a>
							</div>
							<div class="comform">
								<h3>品质家装会场</h3>
								<span style=" color: #EFEFEF; display: block; width: 70px; margin: 0 auto;">买就送好礼</span>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-01.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-02.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-03.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-04.png" /></a>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-05.png" style="padding-top: 40px;"/></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-01.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-01.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-01.png" /></a>
							</div>
						</td>
					</tr>
				</table>
				
			</div>
			
			<div class="stear-two clearfix">
				<ul>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
					<li><a href="">地砖</a></li>
					<li><a href="">地板配件</a></li>
					<li><a href="">木线</a></li>
					<li><a href="">地板</a></li>
				</ul>
				<span><a>商品楼层二</a>Commodity floor two</span>
			</div>
			<div class="floor-two-contant">
				<table>
					<tr>
						<td rowspan="2" class="own">
							<div class="floor1">
								<a href=""><img src="img/index/floor2-00.png" /></a>
							</div>
							<div class="comform">
								<h3>品质家装会场</h3>
								<span style=" color: #EFEFEF; display: block; width: 70px; margin: 0 auto;">买就送好礼</span>
							</div>
							
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor1-01.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-02.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-03.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-04.png" /></a>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-05.png"/></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-06.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-07.png" /></a>
							</div>
						</td>
						<td>
							<p>主标题主标题</p>
							<span>副标题副标题</span>
							<div>
								<a href=""><img src="img/index/floor2-08.png" /></a>
							</div>
						</td>
					</tr>
				</table>
			</div>
			</div>
			<!--颜色-->
			<!--内容-->
			
			
			<!--底部-->
			<footer>
				<div class="footer_tittle clearfix">
					<ul>
						<li><img src="img/you.jpg"></li>
						<li><h4>品质保障</h4>
							<span>品质保证 购物无忧</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/te.jpg"></li>
						<li><h4>特色服务</h4>
							<span>针对户型 私人定制</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/sheng.jpg"></li>
						<li><h4>全网最低</h4>
							<span>厂家直销 低价承诺</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/usre.jpg"></li>
						<li><h4>帮助中心</h4>
							<span>您的购物指南</span>
						</li>
					</ul>
				</div>
				<div class="footer_ul clearfix">
					<hr/>
					<ul class="fl">
						<li>
							<h5><a href="">新手指南</a></h5>
						</li>
						<li><a href="">新手指南</a></li>
						<li><a href="">购物流程</a></li>
						
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">支付方式</a></h5>
						</li>
							<li><a href="">支付宝</a></li>
							<li><a href="">微信</a></li>
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">物流配送</a></h5>
						</li>
						<li><a href="">配送方式</a></li>
						<li><a href="">服务流程</a></li>
						
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">客服中心</a></h5>
						</li>
							<li><a href="">在线客服</a></li>
							<li><a href="">常见问题</a></li>
					</ul>
					<ul class="fl">
						<li>扫一扫，关注鲁班兄弟</li>
						<li><img src="img/code.png"/></li>
					</ul>
				</div>
			</footer>	
			<div class="bottom">
				<div class="bottom-contant">
					<p>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035</p>
					<ul class="clearfix">
						<li><a href="">关于我们</a></li>
						<li><a href="">联系我们</a></li>
						<li style="border: none;"><a href="">法律说明</a></li>
					</ul
				</div>
			</div>
		</div>		
		
	</body>
</html>
